<template>
  <section v-for="item in data" :key="item.path">
    <el-sub-menu v-if="item.children?.length && !item.meta?.hide" :index="item.path">
      <template #title>
        <span>{{ item.meta?.title }}</span>
      </template>
      <!-- 递归组件自身 -->
      <MenuItem :data="item.children"></MenuItem>
    </el-sub-menu>
    <el-menu-item v-if="!item.children?.length && !item.meta?.hide" :index="item.path">
      <span>{{ item.meta?.title }}</span>
    </el-menu-item>
  </section>
</template>

<script setup lang="ts">
import { RouteRecordRaw } from 'vue-router'
// 定义组件接收参数类型
type Props = {
  data: RouteRecordRaw[]
}

// 组件接收参数
defineProps<Props>()
</script>

<script lang="ts">
export default {
  name: "MenuItem"
}
</script>

<style scoped>
</style>